<template>
  <div class="personal">
    <div class="BIgImg" v-if="bigimg" @click="showbig">
      <img :src="message.before_image" v-if="bigimg1" alt="">
      <img :src="message.after_image" v-if="bigimg2" alt="">
    </div>
    <!-- 滚动文字广告 -->
    <div class="banner">
      <text-scroll :dataList="data" scrollType="scroll-left-linear"></text-scroll>
    </div>
    <!-- 抽奖logo -->
    <!-- <div class="cj" @click="floatCj">
    <img src="http://sucai.suoluomei.cn/sucai_zs/images/gif.gif?x-oss-process=image/quality,Q_70" alt="">
    <img src="http://sucai.suoluomei.cn/sucai_zs/images/giftip.png?x-oss-process=image/quality,Q_70" alt="">
    </div>-->

    <div class="bg-style">
      <img
        src="http://sucai.suoluomei.cn/sucai_zs/images/imgbg.png?x-oss-process=image/quality,Q_70"
        alt=""
      >
    </div>
    <!-- 头像 -->
    <div class="secondImg">
      <div class="header2-img">
        <img
          src="http://sucai.suoluomei.cn/sucai_zs/images/beforeuse.png?x-oss-process=image/quality,Q_70"
          class="logo"
          alt=""
        >
        <img :src="message.before_image" alt="" @click="beforeBigImg">
      </div>
      <div class="header-img">
        <img :src="message.after_image" alt="" @click="afterBigImg">
      </div>
    </div>
    <!-- 内容 -->
    <div class="bg-style2">
      <img
        src="http://sucai.suoluomei.cn/sucai_zs/images/bgmh.png?x-oss-process=image/quality,Q_70"
      >
    </div>
    <div class="personal-contant">
      <div class="contant-top">
        <font>{{message.vote_num}}</font>票
        <img
          src="http://sucai.suoluomei.cn/sucai_zs/images/jt.png?x-oss-process=image/quality,Q_70"
          alt=""
        >
      </div>
      <div class="contant-center">
        <font>NO. {{message.id}}</font>
        <font>{{message.name}}</font>
        <font>
          <img
            src="http://sucai.suoluomei.cn/sucai_zs/images/hot.png?x-oss-process=image/quality,Q_70"
            alt=""
          >
          {{message.vote_num}}
        </font>
      </div>
      <div class="contant-bottom">
        <div class="bottom-p">
          <div class="p">{{message.content}}</div>
        </div>
      </div>
      <!-- 拉票 -->
      <!-- <div class="contant-btn">
      <div class="btn-img">
        <button @click="LinkTo('/ticket',message.id)"><img src="http://sucai.suoluomei.cn/sucai_zs/images/love.png?x-oss-process=image/quality,Q_70" alt=""> 为TA拉票</button>
      </div>
      </div>-->
    </div>
    <!-- 底部导航 -->
    <div class="personal-bottom">
      <div class="bottom-item" @click="LinkTo('/')">
        <img
          src="http://sucai.suoluomei.cn/sucai_zs/images/home_select.png?x-oss-process=image/quality,Q_70"
          alt=""
        >
        <font>活动首页</font>
      </div>
      <div class="bottom-item" @click="firstModule()">
        <img
          src="http://sucai.suoluomei.cn/sucai_zs/images/tps.png?x-oss-process=image/quality,Q_70"
          alt=""
        >
      </div>
      <div class="bottom-item" @click="LinkTo('/List')">
        <img
          src="http://sucai.suoluomei.cn/sucai_zs/images/rank_select.png?x-oss-process=image/quality,Q_70"
          alt=""
        >
        <font>榜单</font>
      </div>
    </div>
    <!-- 抽奖弹窗 -->
    <div class="module" v-show="showModule">
      <div class="module-bgimg">
        <div class="module-close">
          <div class="jl" @click="listsModule">抽奖记录</div>
          <img
            src="http://hfc.suoluomei.com/hpl/Public/Beautiful/close.png"
            @click="closeModule"
            alt=""
          >
        </div>
        <div class="Draw">
          <img
            src="http://sucai.suoluomei.cn/sucai_zs/images/Draw.png?x-oss-process=image/quality,Q_70"
            alt=""
            :class="rund"
          >
          <img
            src="http://sucai.suoluomei.cn/sucai_zs/images/GO.png?x-oss-process=image/quality,Q_70"
            class="go"
            @click="start"
            alt=""
          >
        </div>
        <!-- <div class="comfire">
        <div class="comfire-btn">
          <button @click="comfireModule1()">确定</button>
        </div>
        </div>-->
      </div>
    </div>
    <!-- 提示弹窗 -->
    <div class="module" v-show="alertModule">
      <div class="module3-bgimg">
        <div class="module-close2">
          <img
            src="http://hfc.suoluomei.com/hpl/Public/Beautiful/close.png"
            @click="closeModule"
            alt=""
          >
        </div>
        <div class="Draw">
          <img
            src="http://sucai.suoluomei.cn/sucai_zs/images/eyes.png?x-oss-process=image/quality,Q_70"
            alt=""
          >
          <div class="addes">
            <font>很遗憾</font>
            <font>您与奖品擦肩而过~</font>
          </div>
        </div>
        <div class="comfire">
          <div class="comfire-btn">
            <button @click="seeModule">确定</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 提示二维码弹窗 -->
    <div class="module" v-show="alertImgModule">
      <div class="module3-bgimg">
        <div class="module-close">
          <div class="jl" @click="listcomifessss">我的奖品</div>
          <img
            src="http://hfc.suoluomei.com/hpl/Public/Beautiful/close.png"
            @click="closeModules"
            alt=""
          >
        </div>
        <div class="Draw">
          <img
            src="http://sucai.suoluomei.cn/sucai_zs/images/hpl.jpg?x-oss-process=image/quality,Q_70"
            alt=""
            class="erweima"
            v-if="hpl"
          >
          <img
            src="http://sucai.suoluomei.cn/sucai_zs/images/hpl2.jpg?x-oss-process=image/quality,Q_70"
            alt=""
            class="erweima"
            v-if="hpl2"
          >
          <div class="addes" v-if="hpl3">
            <font>关注公众号并且注册
              <br>禾粉圈后可领取奖品~
            </font>
          </div>
        </div>
        <div class="comfire">
          <div class="comfire-btn">
            <button class="hplbtn" v-if="hpl4">
              <a href="http://wxtest.suoluomei.com/hpl/index.php?s=/Weixin/register/index">点击注册禾粉圈</a>
            </button>
            <button class="hplbtn" v-else>
              <a class="btns" @click="listcomife">确定</a>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 记录弹窗 -->
    <div class="module" v-show="listModule">
      <div class="module2-bgimg">
        <div class="module-close">
          <!-- <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/close.png" @click="closeModule" alt=""> -->
        </div>
        <div class="Draw">
          <h2>您的获奖记录</h2>
          <div class="tip-banner">
            <ul>
              <li v-for="item in items" :key="item.index">
                <font>{{item.time}}</font>
                {{item.name}}
              </li>
            </ul>
          </div>
        </div>
        <div class="comfire">
          <div class="comfire-btn">
            <button @click="comfireModule">确定</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 中奖弹窗 -->
    <div class="module" v-show="getModule">
      <div class="module2-bgimg">
        <div class="module-close">
          <img
            src="http://hfc.suoluomei.com/hpl/Public/Beautiful/close.png"
            @click="closeModule"
            alt=""
          >
        </div>
        <div class="Draw">
          <div class="tip-banner">
            <div class="tip-font-get">
              <font>{{messageNews}}</font>
            </div>
            <img
              src="http://sucai.suoluomei.cn/sucai_zs/images/down.png?x-oss-process=image/quality,Q_70"
              alt=""
            >
          </div>
        </div>
        <div class="comfire">
          <div class="comfire-btn">
            <button @click="comfireModule0()">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from "../utils/http";
import textScroll from "../components/scrollText.vue";
export default {
  name: "personal",
  data() {
    return {
      rotate: false,
      rund: "",
      btnflag: false,
      i: 1,
      showModule: false,
      alertModule: false,
      alertImgModule: false,
      listModule: false,
      getModule: false,
      message: {
        // after_image: require("http://sucai.suoluomei.cn/sucai_zs/images/83.png?x-oss-process=image/quality,Q_70"),
        // before_image: require("http://sucai.suoluomei.cn/sucai_zs/images/83.png?x-oss-process=image/quality,Q_70"),
        // vote_num: 10,
        // id: 1,
        // content: "我要参赛"
      },
      items: [
        {
          time: "11/14 19:27",
          prize: "100积分"
        },
        {
          time: "11/14 8:27",
          prize: "电动浸透硅胶洁面仪"
        }
      ],
      data: [],
      lenght: 0,
      messageNews: "",
      contant: "",
      hpl: true,
      hpl2: true,
      hpl3: true,
      hpl4: true,
      bigimg: false,
      bigimg1: false,
      bigimg2: false,
      addressId: "",
      start1: 0
    };
  },
  created() {
    var str = location.href;
    // console.log('urlStr',str)
    // var reg = /sign\/(.*)#/i
    // var res = str.search(reg)
    var start = str.search("sign/");
    var end = str.search("#");
    var start2 = parseInt(start + 5);
    var res = str.substring(start2, end);
    // console.log('res',res)
    let that = this;
    http
      .post("Zmhf/index", {
        data: {
          candidates_id: this.$route.query.candidates_id
        },
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "SelectMyInfoBeautifulGrain"
      })
      .then(function(response) {
        if (response.errcode == 0) {
          that.message = response.data.candidates_info[0];
          // that.data = response.data.log_info;
          that.addressId = response.data.candidates_info[0].division_id;
        } else {
          that.$weui.alert(response.msg);
        }
      })
      .catch(function(error) {
        // console.log(error);
        that.$weui.alert(response.msg);
      });
    http
      .post("Zmhf/index", {
        data: {
          candidates_id: this.$route.query.candidates_id
        },
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "SelectlaterVoteLog"
      })
      .then(function(response) {
        if (response.errcode == 0) {
          that.data = response.data.log_info;
          // that.message = response.data.candidates_info[0];
          // that.addressId = response.data.candidates_info[0].division_id;
        } else {
          that.$weui.alert(response.msg);
        }
      })
      .catch(function(error) {
        // console.log(error);
        that.$weui.alert(response.msg);
      });
  },
  methods: {
    showbig: function() {
      this.bigimg = false;
      this.bigimg1 = false;
      this.bigimg2 = false;
    },
    beforeBigImg: function() {
      this.bigimg = true;
      this.bigimg1 = true;
    },
    afterBigImg: function() {
      this.bigimg = true;
      this.bigimg2 = true;
    },
    viewImg() {
      this.showImg = false;
    },
    start: function() {
      if (this.start1) {
        return;
      }
      this.start1 = 1;
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          data: {
            candidates_id: this.$route.query.candidates_id
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "BeautifulactionDrawPrize"
        })
        .then(function(response) {
          // console.log(response);
          if (response.errcode == 0) {
            // //没中奖
            // if (response.data.good_id == 0) {
            //   that.rund = "run2";
            // }
            //积分
            if (response.data.good_id == 1) {
              that.rund = "run0";
            }
            // 冻干粉
            if (response.data.good_id == 2) {
              that.rund = "4";
            }
            // 破尿酸面膜
            if (response.data.good_id == 3) {
              that.rund = "run2";
            }
            // 禾葡兰幻彩果冻包
            if (response.data.good_id == 4) {
              that.rund = "run6";
            }
            // 樱花初绽杯
            if (response.data.good_id == 5) {
              that.rund = "run4";
            }
            // 电动硅胶洁面仪
            if (response.data.good_id == 6) {
              that.rund = "run7";
            }
            // 禾葡兰定制围巾
            if (response.data.good_id == 7) {
              that.rund = "run5";
            }
            // 暖心保温杯
            if (response.data.good_id == 8) {
              that.rund = "run8";
            }
            that.messageNews = response.msg;
            setTimeout(() => {
              if (response.data.prize_name != null) {
                that.save();
              } else {
                that.saveErro();
              }
            }, 5500);
          } else {
            that.$weui.alert(response.msg);
          }
        })
        .catch(function(error) {
          // console.log(error);
        });
    },
    save: function() {
      this.showModule = false;
      this.getModule = true;
    },
    saveErro: function() {
      this.showModule = false;
      this.alertModule = true;
    },
    floatCj: function() {
      this.showModule = true;
    },
    // 弹窗的显示隐藏
    firstModule: function() {
      if (this.btnflag) {
        // this.btnflag = true;
        return;
      }
      this.btnflag = true;
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          data: {
            candidates_id: this.$route.query.candidates_id,
            division_id: this.addressId
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SaveVoteDataBeautifulGrain"
        })
        .then(function(response) {
          // console.log(response);
          if (response.errcode == 0) {
            that.message.vote_num++;
            // that.$router.go(0)
            that.$weui.toast("投票成功");
            setTimeout(() => {
              that.showModule = true;
            }, 2000);
            that.btnflag = false;
          } else {
            that.$weui.alert(response.msg);
            that.btnflag = false;
          }
        })
        .catch(function(error) {
          // console.log(error);
          that.btnflag = false;
        });
      /*.finally{
          this.btnflag = false;
        };*/
    },
    // 奖品列表
    listsModule: function() {
      this.showModule = false;
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          // candidates_id: this.$route.query.candidates_id
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "BeautifulactionDrawPrizeLog"
        })
        .then(function(response) {
          // console.log("response", response);
          if (response.errcode == 0) {
            that.items = response.data;
          } else {
            that.$weui.alert(response.msg);
          }
        })
        .catch(function(error) {
          // console.log(error);
        });

      http
        .post("Zmhf/index", {
          // candidates_id: this.$route.query.candidates_id
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "JudgeisRegister"
        })
        .then(function(response) {
          // console.log(response);
          // console.log("response.data.is_register",response.data.is_register);
          // console.log("response.data.is_focus",response.data.is_focus);
          if (response.errcode == 0) {
            if (response.data.is_register == 1 && response.data.is_focus == 0) {
              that.alertImgModule = false;
              that.listModule = true;
            }
            if (response.data.is_register == 1 && response.data.is_focus == 1) {
              that.alertImgModule = true;
              that.hpl2 = false;
              that.hpl3 = true;
              that.hpl4 = false;
            }
            if (response.data.is_register == 1 && response.data.is_focus == 2) {
              that.alertImgModule = true;
              that.hpl = false;
              that.hpl3 = true;
              that.hpl4 = false;
            }
            if (response.data.is_register == 0 && response.data.is_focus == 0) {
              that.alertImgModule = true;
              that.hpl = false;
              that.hpl2 = false;
              that.hpl3 = true;
              that.hpl4 = true;
            }
            if (response.data.is_register == 0 && response.data.is_focus == 1) {
              that.alertImgModule = true;
              that.hpl = true;
              that.hpl2 = false;
              that.hpl3 = true;
              that.hpl4 = true;
            }
          } else {
            that.$weui.alert(response.msg);
          }
        })
        .catch(function(error) {
          // console.log(error);
        });
    },
    comfireModule1: function() {
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          // candidates_id: this.$route.query.candidates_id
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "JudgeisRegister"
        })
        .then(function(response) {
          // console.log(response);
          if (response.errcode == 0) {
            if (response.data.is_register == 1 && response.data.is_focus == 0) {
              that.alertImgModule = false;
              that.listModule = true;
            }
            if (response.data.is_register == 1 && response.data.is_focus == 1) {
              that.alertImgModule = true;
              that.hpl2 = false;
              that.hpl4 = false;
            }
            if (response.data.is_register == 1 && response.data.is_focus == 2) {
              that.alertImgModule = true;
              that.hpl = false;
              that.hpl4 = false;
            }
            if (response.data.is_register == 0 && response.data.is_focus == 0) {
              that.alertImgModule = true;
              that.hpl = false;
              that.hpl2 = false;
              that.hpl3 = false;
              that.hpl4 = true;
            }

            if (response.data.is_register == 0 && response.data.is_focus == 1) {
              that.alertImgModule = true;
              that.hpl = true;
              that.hpl2 = false;
              that.hpl3 = false;
              that.hpl4 = true;
            }
          } else {
            that.$weui.alert(response.msg);
          }
        })
        .catch(function(error) {
          // console.log(error);
        });
      var zj = 1;
      if (zj == 0) {
        this.showModule = false;
        this.getModule = true;
      } else {
        this.showModule = false;
        this.alertModule = true;
      }
    },
    seeModule: function() {
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          // candidates_id: this.$route.query.candidates_id
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "JudgeisRegister"
        })
        .then(function(response) {
          // console.log(response);
          if (response.errcode == 0) {
            if (response.data.is_register == 1 && response.data.is_focus == 0) {
              that.alertImgModule = false;
              that.listModule = true;
            }
            if (response.data.is_register == 1 && response.data.is_focus == 1) {
              that.alertImgModule = true;
              that.hpl2 = false;
              that.hpl4 = false;
            }
            if (response.data.is_register == 1 && response.data.is_focus == 2) {
              that.alertImgModule = true;
              that.hpl = false;
              that.hpl4 = false;
            }
            if (response.data.is_register == 0 && response.data.is_focus == 0) {
              that.alertImgModule = true;
              that.hpl = false;
              that.hpl2 = false;
              that.hpl3 = false;
              that.hpl4 = true;
            }

            if (response.data.is_register == 0 && response.data.is_focus == 1) {
              that.alertImgModule = true;
              that.hpl = true;
              that.hpl2 = false;
              that.hpl3 = false;
              that.hpl4 = true;
            }
          } else {
            that.$weui.alert(response.msg);
          }
        })
        .catch(function(error) {
          // console.log(error);
        });
    },
    comfireModule: function() {
      this.listModule = false;
      this.getModule = false;
    },
    comfireModule0: function() {
      if (!localStorage.getItem("first")) {
        localStorage.setItem("first", 1);
        window.location.href =
          "http://wxtest.suoluomei.com/hpl/index.php?s=/weixin/active/gift";
      }
      this.listModule = false;
      this.getModule = false;
    },
    closeModules: function() {
      this.showModule = false;
      this.alertModule = false;
      this.alertImgModule = false;
      this.listModule = false;
      this.getModule = false;
    },
    closeModule: function() {
      this.showModule = false;
      this.alertModule = false;
      this.alertImgModule = false;
      this.listModule = false;
      this.getModule = false;
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          // candidates_id: this.$route.query.candidates_id
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "JudgeisRegister"
        })
        .then(function(response) {
          // console.log(response);
          if (response.errcode == 0) {
            if (response.data.is_register == 1 && response.data.is_focus == 0) {
              that.alertImgModule = false;
              that.listModule = true;
            }
            if (response.data.is_register == 1 && response.data.is_focus == 1) {
              that.alertImgModule = true;
              that.hpl2 = false;
              that.hpl4 = false;
            }
            if (response.data.is_register == 1 && response.data.is_focus == 2) {
              that.alertImgModule = true;
              that.hpl = false;
              that.hpl4 = false;
            }
            if (response.data.is_register == 0 && response.data.is_focus == 0) {
              that.alertImgModule = true;
              that.hpl = false;
              that.hpl2 = false;
              that.hpl3 = false;
              that.hpl4 = true;
            }

            if (response.data.is_register == 0 && response.data.is_focus == 1) {
              that.alertImgModule = true;
              that.hpl = true;
              that.hpl2 = false;
              that.hpl3 = false;
              that.hpl4 = true;
            }
          } else {
            that.$weui.alert(response.msg)
          }
        })
        .catch(function(error) {
          // console.log(error);
        });
    },
    listcomife: function() {
      this.alertImgModule = false;
      this.listModule = true;
    },
    listcomifessss: function() {
      this.alertImgModule = false;
      this.listModule = true;
    },
    // 路由跳转
    LinkTo: function(link, index) {
      this.$router.push({
        path: link,
        query: {
          candidates_id: index
        }
      });
    }
  },
  components: { textScroll }
};
</script>

<style lang="scss" scoped>
.personal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  height: 100vh;
  .BIgImg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5000;
    img {
      max-width: 80%;
      max-height: 80%;
    }
  }
  .banner {
    position: fixed;
    top: 0;
    left: 2.5%;
    width: 95%;
    height: 2rem;
    z-index: 3000;
  }
  .cj {
    position: fixed;
    display: inline-flex;
    align-items: center;
    top: 3rem;
    right: 0;
    height: 3rem;
    z-index: 3000;
    img {
      &:nth-of-type(1) {
        position: absolute;
        right: 3.2rem;
        width: 2.5rem;
        height: 2.5rem;
      }
      &:nth-of-type(2) {
        position: absolute;
        right: 0;
        width: 4.5rem;
        height: 2rem;
      }
    }
  }
  .bg-style {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
    // // 设置高斯模糊
    // -webkit-filter: blur(20px); /* Chrome, Opera */
    // -moz-filter: blur(20px);
    // -ms-filter: blur(20px);
    // filter: blur(20px);
  }
  .secondImg {
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 15rem;
    z-index: 2000;
    .header-img {
      margin-left: 1rem;
      width: 40%;
      height: 10rem;
      border: #ffdb76 0.1rem solid;
      img {
        padding: 0.1rem;
        width: 100%;
        height: 10rem;
        vertical-align: bottom;
        object-fit: cover;
        overflow: hidden;
      }
    }
    .header2-img {
      position: relative;
      width: 40%;
      height: 10rem;
      border: #ffdb76 0.1rem solid;
      .logo {
        position: absolute;
        top: 0;
        right: 0;
        width: 3rem;
        height: 3rem;
      }
      img {
        object-fit: cover;
        overflow: hidden;
        padding: 0.1rem;
        width: 100%;
        height: 10rem;
        vertical-align: bottom;
      }
    }
  }

  .bg-style2 {
    position: absolute;
    top: 9rem;
    left: 5%;
    width: 90%;
    height: 27rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .personal-contant {
    position: absolute;
    top: 17rem;
    width: 90%;
    left: 5%;
    z-index: 1000;
    .contant-top {
      margin-top: 0rem;
      width: 100%;
      font-size: 1rem;
      font {
        color: #ff4e4e;
        font-size: 1.3rem;
        font-weight: 600;
      }
      img {
        margin-left: 1rem;
        width: 0.65rem;
      }
    }
    .contant-center {
      padding: 0.5rem 0;
      display: inline-flex;
      justify-content: space-around;
      color: #000;
      font-size: 1rem;
      width: 100%;
      font {
        img {
          margin-right: 0.2rem;
          width: 1rem;
          height: 1rem;
        }
      }
    }
    .contant-bottom {
      display: flex;
      justify-content: center;
      width: 100%;
      .bottom-p {
        position: relative;
        width: 17.5rem;
        height: 12rem;
        background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/yun.png?x-oss-process=image/quality,Q_70");
        background-position: center;
        background-size: 22rem 16rem;
        background-repeat: no-repeat;
        .p {
          position: absolute;
          top: 2.8rem;
          left: 3rem;
          width: 12rem;
          height: 6rem;
          margin: 0;
          text-align: left;
          overflow: scroll;
          white-space: normal;
          word-break: break-all;
          font-size: 0.85rem;
        }
      }
    }
    .contant-btn {
      display: inline-flex;
      justify-content: center;
      padding-top: 0.5rem;
      width: 100%;
      .btn-img {
        padding: 0.06rem 0.1rem;
        width: 8rem;
        height: 2.5rem;
        border-radius: 0.3rem;
        button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          border-radius: 0.3rem;
          border: 0;
          background-color: #fff;
          font-size: 0.9rem;
          border: 0.1rem solid #ff0837;
          img {
            margin-right: 0.5rem;
            width: 1.4rem;
            height: 1.1rem;
          }
        }
      }
    }
  }
  .personal-bottom {
    display: inline-flex;
    justify-content: space-around;
    align-items: flex-end;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 4rem;
    z-index: 3000;
    .bottom-item {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: flex-end;
      width: 6rem;
      height: 4rem;
      &:nth-of-type(2) {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
        width: 8rem;
        height: 7rem;
        img {
          width: 6rem;
          height: 6rem;
        }
      }
      img {
        padding-top: 0.2rem;
        width: 1.8rem;
        height: 1.8rem;
      }
      font {
        display: block;
        width: 100%;
        padding-bottom: 0.1rem;
        color: #ccc;
      }
    }
  }
  .module {
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 3000;
    .module-bgimg {
      width: 100%;
      height: 25rem;
      background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/tacket-img.png?x-oss-process=image/quality,Q_70");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      .module-close {
        margin-top: 5rem;
        padding-right: 5rem;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        .jl {
          font-size: 0.9rem;
          color: #fff;
          padding-left: 3.5rem;
        }
        img {
          width: 1.2rem;
        }
      }
      .Draw {
        padding-right: 1rem;
        position: relative;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        .stop {
          transition: all 3s;
          transform: rotate;
        }
        // 积分
        .run0 {
          transform: rotate(4710deg);
          transition: all 5s;
        }
        //谢谢惠顾
        // .run2 {
        //   transform: rotate(4730deg); //4730
        //   transition: all 5s;
        // }
        //面膜
        .run2 {
          transform: rotate(4750deg);
          transition: all 5s;
        }
        //冻干粉
        .4 {
          transform: rotate(4800deg);
          transition: all 5s;
        }
        //养眼杯
        .run4 {
          transform: rotate(4850deg);
          transition: all 5s;
        }
        //围巾
        .run5 {
          transform: rotate(4885deg);
          transition: all 5s;
        }
        //果冻包
        .run6 {
          transform: rotate(4930deg);
          transition: all 5s;
        }
        //洁面仪
        .run7 {
          transform: rotate(4975deg);
          transition: all 5s;
        }
        //保温杯
        .run8 {
          transform: rotate(5020deg);
          transition: all 5s;
        }
        .tip-banner {
          width: 100%;
          overflow: hidden;
          ul {
            width: 100%;
            height: 10rem;
            margin: 0;
            padding: 0;
            li {
              list-style: none;
            }
          }
          .tip-font {
            position: absolute;
            top: 7rem;
            left: 0;
            width: 100%;
            left: 0;
            font-size: 1rem;
            color: #333;
          }
          .tip-font-get {
            position: absolute;
            top: 10rem;
            left: 0;
            width: 100%;
            left: 0;
            font-size: 1rem;
            color: #777;
            font {
              display: block;
              width: 15rem;
              color: #333;
              font-weight: 600;
              font-size: 1rem;
            }
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .tip-text {
          width: 100%;
          font-size: 1rem;
          color: #555;
          font {
            font-size: 1.2rem;
            color: #ff4e4e;
          }
        }
        .go {
          position: absolute;
          top: 4.8rem;
          left: 9.8rem;
          width: 2.8rem;
          height: 4.1rem;
        }
        .prize {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          img {
            position: absolute;
            top: 6rem;
            right: 3.5rem;
            width: 3rem;
            height: 3rem;
          }
        }
        img {
          margin: 1rem 0;
          width: 13rem;
          height: 13rem;
        }
        h2 {
          padding: 2rem 0;
        }
        .add {
          width: 100%;
          font {
            display: block;
            color: #555;
            font-size: 1rem;
          }
        }
        .change {
          padding-bottom: 4rem;
          width: 100%;
          color: #000;
          font {
            color: #ff4e4e;
            font-size: 2rem;
          }
        }
      }
      .comfire {
        margin-top: 1rem;
        margin-left: -1rem;
        display: inline-flex;
        justify-content: center;
        width: 100%;
        .comfire-btn {
          width: 6.5rem;
          height: 2.2rem;
          line-height: 2rem;
          border-radius: 0.5rem;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          button {
            width: 100%;
            height: 100%;
            border: 0.2rem solid #ffbe04;
            border-radius: 0.5rem;
            outline: none;
            background-color: #ffdb76;
          }
        }
      }
    }
    .module2-bgimg {
      width: 100%;
      height: 25rem;
      background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/tacket2-img.png?x-oss-process=image/quality,Q_70");
      background-repeat: no-repeat;
      background-size: 18rem;
      background-position: center;
      .module-close {
        margin-top: 2rem;
        padding-right: 4rem;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        img {
          width: 1.2rem;
        }
      }
      .Draw {
        position: relative;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        h2 {
          color: #fff;
        }
        width: 100%;
        .tip-banner {
          width: 100%;
          overflow: hidden;
          ul {
            width: 100%;
            margin: 0;
            max-height: 10rem;
            overflow: scroll;
            padding: 0;
            li {
              padding-left: 5rem;
              text-align: left;
              list-style: none;
              color: #fff;
            }
          }
          .tip-font-get {
            display: inline-flex;
            justify-content: center;
            position: absolute;
            left: 0;
            top: 11rem;
            width: 100%;
            font-size: 0.9rem;
            color: #fff;
            font {
              display: block;
              width: 15rem;
              color: #fff;
              font-weight: 600;
              font-size: 1rem;
            }
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .tip-text {
          width: 100%;
          font-size: 1rem;
          color: #555;
          font {
            font-size: 1.2rem;
            color: #ff4e4e;
          }
        }
        img {
          margin: 1rem 0;
          width: 12rem;
          height: 12rem;
        }
        h2 {
          padding: 2rem 0;
        }
        .add {
          width: 100%;
          font {
            display: block;
            color: #555;
            font-size: 1rem;
          }
        }
      }
      .comfire {
        margin-top: 3rem;
        display: inline-flex;
        justify-content: center;
        width: 100%;
        .comfire-btn {
          width: 6.5rem;
          height: 2.2rem;
          line-height: 2rem;
          border-radius: 0.5rem;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          button {
            width: 100%;
            height: 100%;
            border: 0.2rem solid #ffbe04;
            border-radius: 0.5rem;
            outline: none;
            background-color: #ffdb76;
          }
        }
      }
    }
    .module3-bgimg {
      width: 100%;
      height: 25rem;
      background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/tacket2-img.png?x-oss-process=image/quality,Q_70");
      background-repeat: no-repeat;
      background-size: 18rem;
      background-position: center;
      .module-close {
        margin-top: 2rem;
        padding-right: 4rem;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        .jl {
          font-size: 0.9rem;
          color: #fff;
          padding-left: 3.5rem;
        }
        img {
          width: 1.2rem;
        }
      }
      .module-close2 {
        margin-top: 2rem;
        padding-right: 4rem;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        .jl {
          font-size: 0.9rem;
          color: #fff;
          padding-left: 3.5rem;
        }
        img {
          width: 1.2rem;
        }
      }
      .Draw {
        position: relative;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        .erweima {
          width: 7rem;
          margin: 1rem 0.5rem;
          height: 7rem;
        }
        .tip-banner {
          width: 100%;
          overflow: hidden;
          ul {
            width: 100%;
            height: 10rem;
            margin: 0;
            padding: 0;
            li {
              list-style: none;
            }
          }
          .tip-font-get {
            position: absolute;
            left: 0;
            top: 11rem;
            width: 100%;
            font-size: 0.9rem;
            color: #fff;
            font {
              color: #fff;
              font-weight: 600;
              font-size: 1.1rem;
            }
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .tip-text {
          width: 100%;
          font-size: 1rem;
          color: #555;
          font {
            font-size: 1.2rem;
            color: #ff4e4e;
          }
        }
        img {
          margin: 1rem 0;
          width: 15rem;
          height: 9rem;
        }
        h2 {
          padding: 2rem 0;
        }
        .add {
          display: inline-flex;
          justify-content: center;
          width: 100%;
          font {
            display: block;
            width: 15rem;
            color: #fff;
            font-size: 0.9rem;
          }
        }
        .addes {
          display: inline-flex;
          flex-wrap: wrap;
          justify-content: center;
          width: 100%;
          font {
            display: block;
            width: 100%;
            color: #fff;
            font-size: 0.9rem;
          }
        }
      }
      .comfire {
        margin-top: 2rem;
        display: inline-flex;
        justify-content: center;
        width: 100%;
        .comfire-btn {
          width: 8rem;
          height: 2.2rem;
          line-height: 2rem;
          border-radius: 0.5rem;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          button {
            width: 100%;
            height: 100%;
            border: 0.2rem solid #ffbe04;
            border-radius: 0.5rem;
            outline: none;
            background-color: #ffdb76;
            a {
              color: #ff0837;
            }
          }
        }
      }
    }
  }
}
</style>
